Setting Up Your Flutter-Woocommerce App

A quick guide

INTRO

FWoo Store is a one-size-fits-all full mobile app solution for android and iOS specifically tailored for:
1. Woocommerce vendors  looking to create mobile apps for their WooCommerce based stores
2. developers looking to use WooCommerce as a BaaS (Backend as a Service)
 
FWoo Store was made to help developers and vendors save a lot of time and development cost. It only takes a couple of hours or less to integrate your WooCommerce Store and have your store up and running in a mobile app environment.
 
Here is a list of some of the major features of this app:

Download the demo app on the Play Store https://play.google.com/store/apps/details?id=com.flutter.woocommerce

PREREQUISITES

  1. If you are not already a Flutter developer, you will need to install Flutter SDK in your machine as well as having a text editor such as Notepad.

    To get started with Flutter:
    -  head on to https://docs.flutter.dev/get-started/install
    -  follow the documentaion to get flutter installed.

    If you need help or get stuck at any point in this tutorial, reach me on Twitter @apstkingssamuel.
     
  2. You need to have setup a WooCommerce Store. 

    For you to have a WooCommerce store, you will need to have:

CONTENT OUTLINE

This documentaion is broken down into different sections to help you easily set up your app

  1. Intro
  2. Prerequisites
  3. Content outline
  4. Code extraction
  5. Get dependencies
  6. Change app package name
  7. Change app name, icon and splash screen
  8. Google auth configuration
  9. Facebook auth configuration
  10. Get WooCommerce API keys
  11. Setting up JWT plugin for authentication
  12. Cart configuration
  13. Social authentication configuration
  14. Payment options configuration
  15. Automated emails setup
  16. Extra configurations for iOS
  17. Run your app

CODE EXTRACTION

After downloading the source code which comes in a zip file, extract if to your preffered folder.

You will be prompted for a password, enter @flutterwoocommerce123

GET DEPENDENCIES

In order to reduce the size of the zip file, the packages and dependencies used to build the app were cleaned. To fetch the dependencies, follow the follwing steps:

1. Open your terminal or command prompt. You can get this by searching any of the two terms in your start menu

 

Select run as administrator. It will open anew window as shown below

 

2. Navigate to the folder where you extracted the app

To do this, type cd "YOUR APP FOLDER PATH", then click enter. See the example below

 

3. Run command to get dependencies

Now that you are in your app directory, run the command "flutter pub get"  and wait some seconds for the operation to be complete

 

 

 

CHANGE APP PACKAGE NAME

Your app package name is the unique identifier for your app on your device as well as on the app stores.

It goes like "com.domain.example", where "domain" can either be your comapny's name or your domain name and "example" is the name you wish to name your app.

In our app, I will be naming mine com.flutter.woocommerce

How to do this is open your terminal and run the command below
flutter pub run change_app_package_name:main com.flutter.woocommerce

Remenber to use your own names instead of flutter and woocommerce before running the command

After running the command, you should get something like this

CHANGE APP NAME, ICON AND LAUNCH SCREEN

Change app name

  1. Locate your AndroidManifest.xml file. To do this, from your project root folder, you will find it according to this path android/app/src/main/AndroidManifest.xml
     
  2. Open the AndroidManifest.xml file in your text editor or IDE. To keep things simple, I will be making use of Notepad in this documentation.
     
  3. At the beginning of the application tag, change the android label to the name you wish to name your app. In my case, I have called it "FWoo Store".  See the screenshot below

 

  1. Open your info.plist file located at ios/Runner
     
  2. Locate this block of code below

<key>CFBundleName</key>

<string>FWoo Store</string> //your App name goes here

 
 
 
 

Change app icon

  1. Put your preferred icon in the assets/res folder. It must be a png file
     
  2. Open your pubspec.yaml file (located at your root folder)
     
  3. Locate where you have this block of code

If you have given your icon a different name, change icon.png to the name of your new icon. Don't forget to add the .png extensio

         4. In your terminal, run the command flutter pub run flutter_launcher_icons:main, and click on enter

 

 

Change App Launch Screen

The launch screen or splash screen is the first screen you see when you launch an app. To change the launch screen:

  1. If you want splash screen to be a fullscreen image, edit your image in portrait mode. I usually give mine the resolution of 1080x1920px. 

    If you want to keep it simple, just use an icon. Make sure that your images are in png format

    Add your image to the folder assets/res
     
  2. Open your pubspec.yaml and locate the block of code below
  3. If you are using a fullscreen image, just change splash to the name of your fullscreen image.

    If you are using an icon, follow steps 4, 5 and 6, else skip to step 7.
     
  4. edit your code to look like below
  5. Change color to your preferred hexadecimal value for the background colour of your splash screen
     
  6. In the image property, change icon to the name of the new icon image you have chosen
     
  7. Now, in your terminal, run the following command flutter pub run flutter_native_splash:create

 
 
 
 
 

GOOGLE AUTH CONFIGURATION

1. To configure your Google login for Android, please refer to this video, start playing it from 01:30 to 05:35

2. To configure your Google login for iOS, please refer to this video, start playing it from 13:35 to 15:10

FACEBOOK AUTH CONFIGURATION

NOTE: You will need a folder called openssl while following the setup in the video. I have made it available in your app file loctaed at resources folder. Just cut this folder and paste it into a private directory of your choice such as C:UserskingsAppDataLocal. Then copy the path for later.

1. To configure your Facebook login for Android, please refer to this video, start playing it from 00:58 to 06:00

2. To configure your Facebook login for iOS, please refer to this video, start playing it from 17:00 to 18:35

3. Regarless of your platform, make sure you cover 13:53 to 14:46 to add developers and testers to your Facebook setup pending when your app is approved by Facebook and then any Facebook account can login

GET WOOCOMMERCE API KEYS

  1. Go to the admin dashboard of your WordPress Installation @ https://your-domain-name.com/wp-admin


     
  2. On the left menu, WooCommerce>>Settings>>Advanced>>Rest API

     
  3. Select Add Key.
  4. Give your API keys a description in the description text box.
    Set permissions to read/write 
    Click on the Generate API key button. You will get a screen like this


    Do not close this page yet as you will not be able to see these keys again after now
     
  5. In your app folder, open the api_constants.dart file (located at lib/constants)
     
  6. Copy your consumer key and app paste it in the key variable
    Copy your consumer secret and app paste it in the secret variable
    In the url and tokenURL variables, add your websites domain name with the https protocol just before the "/wp-json". See example below

SETTING UP JWT PLUGIN FOR AUTHENTICATION

  1. In your WooCommerce dashboard, select Plugins from the left menu and select Add new
     
  2. In the search box, type in JWT. Install the JWT plugin by "Useful Team" and click activate



     
  3. Login to your website's hosting control panel



    Select File Manager. It will open all your website files in a new window

    If your website is not a subdomain, your website folder name should be something like /home/your-domain-name and it is automatically open when the load the page.  

    Scroll down until you find the "public_html" folder as highlighted in the screenshot below. Then double click to open the folder.




    On the other hand, if your website is a sub-domain, scroll down and locate your subdomain folder. See example as highlighted in the screenshot below. Then double click to open the folder



     
  4. Now, you are in your website's folder, locate the .htaccess file, right-click on it and selct the edit option. This will open the file in a new window where you can edit it



     
  5. Copy and paste the block this block of code at the top of the file

    RewriteEngine on
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
  6. Go back to your website file manager, locate your wp-config.php file on the same page, right-click and select edit.



     
  7. Locate where your database settings are declared as shown below



     
  8. Add these blocks of code to the top of the line
    define('JWT_AUTH_SECRET_KEY', 'top-secret-key');

    define('JWT_AUTH_CORS_ENABLE', true);

 

CART CONFIGURATION

  1. Still in your website file manager, find the class-wc-rest-webhook-controller.php file (located at /wp-content/plugins/woocommerce/includes/rest-api/Controllers/Version3/class-wc-rest-webhooks-controller.php)
     
  2. Right-click and select the edit option. This will open the file in a new window where you can edit it.
     
  3. Go to your app folder, open the cart_webhook.php file located at /resources folder. 
     
  4. Copy all the content, go back to your class-wc-rest-webhook-controller.php file in your browser and replace all the content there with the new one you have copied, then save. Everything should be about 194 lines thereabout.

SOCIAL AUTH CONFIGURATION

  1. Back to your website file manager, find the class-auth.php file located at /wp-content/plugins/jwt-auth
     
  2. Right-click on the file, select edit.
     
  3. Go to your app folder, open the social_login.php file located at /resources folder. 
     
  4. Copy all the content, go back to your class-auth.php file in your browser and replace all the content there with the new one you have copied, then save


     

PAYMENT OPTIONS CONFIGURATION

             PAYPAL

AUTOMATED EMAIL SETUP

In this video, I have explained how to send automated emails to customers. Watch from 52:45 to 01:02:44

EXTRA CONFIGURATIONS FOR iOS

if you will be developing an app for iOS devices, you will need to do these extra configurations to make your app work perfectly on iOS devices and emulators. Each listed item is a link. Clink on them to navigate you to the sites where the instructions are documented

RUN YOUR APP

Now, we have finished all necessary setups for our app. 
 

Go to your terminal and now write the command flutter run and hit enter. Make sure that your device is connected to your machine.

For further assistance, reach me on twitter